<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h3>block-01：调用 node.js 获取版本号</h3>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
    <hr>

    <h3>block-02：渲染线程，获取对象并修改页面内容</h3>
    <p>👋👋👋👋👋👋👋</p>
    <p id="info">原始内容</p>
    <hr>
    
    <h3>block-03：模式 1：渲染器进程到主进程（单向）</h3>
    <!-- 可以通过编程方式更改它的窗口标题  -->
    Title: <input id="title"/>
    <button id="btn" type="button">Set</button>

    <!-- 在下面的示例中，我们将从渲染器进程打开一个原生的文件对话框，并返回所选文件的路径。 -->
    <hr>
    <p>模式 2：渲染器进程到主进程（双向）</p>
    <button type="button" id="btn2">Open a File</button>
    File path: <strong id="filePath"></strong>

    <!-- 为了演示此模式，我们将构建一个由原生操作系统菜单控制的数字计数器。 -->
    <hr>
    <p>模式 3：主进程到渲染器进程</p>
    Current value: <strong id="counter">0</strong>
    
    <hr>
    
    <!-- 您也可以此进程中运行其他文件 -->
    <script src="./renderer.js"></script> <!-- 渲染器 js渲染页面-->
  </body>
</html>